import React, { Component } from 'react'
import { FullScreenContainer, BorderBox1, ScrollBoard, BorderBox8 } from '@jiaminghi/data-view-react'
import './index.css'
import { Radio , Button } from 'antd'
import {LogoutOutlined , WarningFilled} from '@ant-design/icons'
import Title from './Title'
import Table from './Table'

const data1 = {
    header: ['列1', '列2', '列3'],
    data: [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3']
    ],
    rowNum: 2,

}
const data2 = {
    header: ['列1', '列2', '列3'],
    data: [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3']
    ],
    rowNum: 3
}
export default class index extends Component {
    state = {
        windowHeight: 0
    }

    componentDidMount() {
        // 定义时间计时器
        this.timer = setInterval(() => {
            this.getTime();
            this.forceUpdate();
        }, 1000)
        // 初始化窗口大小
        this.setState({
            windowHeight: window.innerWidth / 6.5
        })
        // 监听窗口变化
        window.addEventListener("resize", this.changeWidth)
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.changeWidth);
    }

    changeWidth = (e) => {
        // 改变窗口大小
        const screenWidth = e.target.innerWidth;
        if (screenWidth <= 768) {
            this.setState({
                windowHeight: screenWidth / 6.5
            })
        } else if (screenWidth >= 1300) {
            this.setState({
                windowHeight: screenWidth / 6.5
            })
        } else if (768 < screenWidth < 1300) {
            this.setState({
                windowHeight: screenWidth / 6.5
            })
        }
    }

    getTime = () => {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth();
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        var weekends = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var info = y + "年" + m + "月" + d + "日 " + (h < 10 ? '0' + h : h) + ":" + (min < 10 ? '0' + min : min) + ":" + (s < 10 ? '0' + s : s) + " " + weekends[date.getDay()];
        this.msg = info;
    }

    render() {
        console.log(this.state);
        return (
            <FullScreenContainer className="kanban">
                <div ref={(node) => { this.root = node; }} id="kb_root">
                    <div className="kb_title_container">
                        <div className="kb_title">
                            <Title/>
                        </div>
                    </div>
                    <div className="kb_body">
                        <div className="kb_body_left">
                            <div className="kb_body_left1">
                                <div className="container">
                                    <Table {...this.state}/>
                                </div>
                            </div>
                            <div className="kb_body_left2">
                                <div className="container"></div>
                            </div>
                        </div>
                        <div className="kb_body_right">
                            <div className="kb_body_right1">
                                <div className="container1">
                                    <div className="container"></div>
                                </div>
                                <div className="container2">
                                    <div className="container"></div>
                                </div>
                            </div>
                            <div className="kb_body_right2">
                                <div className="container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </FullScreenContainer>
        )
    }
}
